今天我們來看 Routing 路由的部分

Routing

在 Client-Side-Rendering (CSR) 的開發中
沒了路由，就像是斷了腿的跑者
由此可見，路由扮演了一個很重要的角色

在 React 中，我們最常使用「react-router-dom」，這個套件進行 React 的路由管理
藉由切換不同路徑，顯示對應的頁面或元件

在此專案也是使用 react-router-dom

react-router-dom

在 react-router-dom 裡面提供很多元件
以下簡單介紹幾個常用的

• Router
  分為「HashRouter」和「BrowserRouter」
  HashRouter 會在路徑前面加上「#」
  而在開發中比較常用到則是 BrowserRouter
• Switch
  裡面包著Route，只用來顯示一個路由
• Route
  控制路徑顯示對應的元件或是頁面
• Link
  用於導向不同頁面的元件

專案中的應用

在 lodestar-app 中，是把路由包成一個名為「AppRouter」的元件來使用
被各個 Context 所包覆

首先我們在 AppRouter 中看到有一個「AppRouterContext」，它是用於封裝成一個 custom hook 給其他地方使用

接著是「BrowserRouter」，讓底下所有元件都能使用 router

再來是「QueryParamProvider」，用於各個頁面或是元件可以直接取用URL的參數

最重要的部分來了，AppPage
所有的頁面和元件都會呈現在此

其中比較特別的部分是「Suspense」和「fallback」
這兩個我之前都沒接觸過

Suspense 是 React 提供的特殊元件
當「目標載入元件」還沒載入完成時，React 會顯示 fallback 這個 props 綁定的「讀取元件」，一直到「目標載入元件」載入完成後再切換過來

最後我們看看 Route

它被 AppPage 包著，並且跑「routesMap」這個物件來生成路由

對比一個一個設定，是不是乾淨了許多？

明天我們繼續來看 type 的部分

參考文章

【Day.24】React效能 - 用lazy和Suspense來動態載入元件